<template>
  <div class="product-list" :class="{'recommend': recommend}" v-if="showProductList">
      <h1 v-if="recommend" class="recommend-title">Product Recommend</h1>
      <!-- 逾期应还订单 -->
        <!-- <Product @chooseChange='chooseProduct' v-for="(item, index) in productList.overdueCustOrders"
            :product="item" :key='index' type="overdueCustOrders"></Product> -->

        <!-- 待还款 -->
        <!-- <Product v-for="(item, index) in productList.unRepayCustOrders" :product="item" :key='index'
            type="unRepayCustOrders"></Product> -->
        <!-- 申请中 -->
        <Product v-for="(item, index) in productList.pendingCustOrders" :product="item" :key='index'
            type="pendingCustOrders"></Product>
        <!-- 余额不足 -->
        <!-- <Product @chooseChange='chooseProduct' v-for="(item, index) in productList.frozenCustOrders" :product="item"
          :key='index' type="frozenCustOrders"></Product> -->
        <!-- 集合产品 -->
        <Product @chooseChange='chooseProduct' v-for="(item, index) in productList.productCollectionList"
          :product="item" :key='item.name' type="productCollectionList"></Product>
        <!-- 复贷产品+普通产品 -->
        <Product @chooseChange='chooseProduct' v-for="(item, index) in productList.allProductList"
          :product="item" :key='item.productName' type="generalCanApplyCustOrders"></Product>
        <!-- 全部借完 自定义产品 -->
        <Product v-if="productListLen === 0" @chooseChange='chooseSelfProduct' v-for="(item, index) in defaultProductList"
          :product="item" :key='item.productName' type ='defaultApplyCustOrders'></Product>
        <!-- 提示框 -->
        <Modal class="fee-info-wrap" v-model="showDialog" @close="handleClose">
          <div class="mine-dialog pb-32">
            <p class="title pt-0">Tips</p>
            <p class="text">No quota, please come back tomorrow.</p>
          </div>
          <div class="tips-btn-group">
              <button class="btn-ui cancel" @click="handleClose">Cancel</button>
              <button class="btn-ui" @click="handleClose">OK</button>
          </div>
        </Modal>
        <Tips ref="tips" :pageTrackerInfo="pageTrackerInfo"/>
  </div>
</template>

<script>
import Product from '../product'
import Tips from '../tips'
import Modal from '@/components/Modal'

export default {
  props: {
    recommend: true,
    disabled: false, // 禁用状态 会使用自定义跳转
    pageTrackerInfo: {
      type: Object,
      default: () => {}
    },
    orderId: '', // 订单id 用作埋点
    replace: false // 是否关闭当前路由进行跳转
  },
  components: {
    Product,
    Tips,
    Modal
  },
  data () {
    return {
      showDialog: false,
      productList: {},
      productListLen: 1,
      showProductList: true,
      defaultProductList: [
        { productName: 'VIP Exclusive', contractAmount: '80000',  orderNum: '', reloan: 1, productId: 10000000 }
      ]
    }
  },
  mounted () {
    // 在这调用为了解决页面曝光时期  
    this.getDataIntegrity()
  },
  methods: {
    async getProductList(params) {
      this.showProductList = true
      let res = await this.$api.getListNew(params)
      let { phone } = this.$storage.get('user');
      if (phone == '09453678670') {
        res = {
          "status": "1",
          "error": "00000000",
          "msg": "",
          "data": {
            "pendingCustOrders": [
              {
                contractAmount: 3500,
                expireTime: null,
                frozenDays: 0,
                orderNo: "782732221373136444",
                productId: 444,
                productName: "VIP1",
                status: 1,
                successFlag: false,
              }
            ],
          }
        }
      };
      const { status, error, data } = res;
      if (status == '1' && error == '00000000') {
        this.productList = data;
        // data.generalCanApplyCustOrders.sort((a, b) => Math.random() > 0.5 ? 1 : -1);
        let productListLen = 0;
        for (let key in data) {
          if (data[key] && data[key].length) {
            productListLen = productListLen + data[key].length
          }
        };
        this.productListLen = productListLen
        if (this.productListLen === 0) {
          if (this.pageTrackerInfo.page === 'list') {
             // 产品列表页空页面曝光
            this.$buryPoint.action({
              eventName: 'list_nullpage_show',
              ...this.pageTrackerInfo
            });
          }
        } else {
          const eventName = {
            applyFinished: 'applyFinished_product_show', // 下单完成页产品推荐模块曝光
            billDetail: 'billDetail_product_show', // 账单详情页产品推荐模块曝光
          }
          const name = eventName[this.pageTrackerInfo.page]
          let eventValue = {}
          if (this.pageTrackerInfo.page === 'billDetail') eventValue.orderId = this.orderId
          if (name) {
            this.$buryPoint.action({
              eventName: name,
              eventValue,
              ...this.pageTrackerInfo
            });
          }
        }
        let date = new Date();
        let yearTime = `${date.getFullYear()}${date.getMonth()}${date.getDay()}`;
        let RepayTips = this.$storage.get("RepayTips");
        let nubs = 0;
        if (RepayTips && yearTime == RepayTips.time) {
          nubs = RepayTips.nub;
        };
        // 产品列表页 
        if (this.pageTrackerInfo.page === 'list' && data.repayWinFlag==1 && nubs == 0) {
          this.$refs.tips.showTips = true;
          this.$buryPoint.action({
            eventName: 'list_repayPopup_show',
            ...this.pageTrackerInfo
          });
          this.$storage.set("RepayTips", { time: yearTime,nub:1 })
        }
      }
    },
    handleClose () {
      this.showDialog = false
    },
    async getDataIntegrity () { // 判断资料完整度 没完成 不显示（包括假数据）
      const res = await this.$api.getDataIntegrity()
      const { status, error, data } = res;
      if (status == '1' && error == '00000000') {
        if (data.taskStatus === '1') {
          this.getProductList({})
        } else {
          this.showProductList = false
        }
      }
    },
    chooseSelfProduct () {
      if (this.disabled) {
        this.$emit('customeAction')
        return
      }
      if (this.pageTrackerInfo.page === 'list') {
        // 产品列表页空页面产品点击 
        this.$buryPoint.action({
          eventName: 'list_nullpage_click',
          ...this.pageTrackerInfo
        });
      }
      this.showDialog = true
    },
    chooseProduct (product) {
      if (this.disabled) {
        this.$emit('customeAction')
        return
      }
      let eventValue = {}
      if (product.custApplyProductList) {
        const { name, amount } = product
        const productIds = product.custApplyProductList.map(item => item.productId)
        eventValue = {
          name,
          amount,
          productIds
        }
      } else {
        const { productName, contractAmount, productId } = product
        eventValue = {
          productName,
          contractAmount,
          productId
        }
      }
      const eventName = {
        list: 'list_apply_click', // 产品列表页申请按钮点击
        applyFinished: 'applyFinished_listProduct_apply_click', // 下单完成页列表产品申请按钮点击
        billDetail: 'billDetail_product_click', // 账单详情页产品列表申请按钮点击
      }
      this.$buryPoint.action({
        eventName: eventName[this.pageTrackerInfo.page],
        eventValue,
        ...this.pageTrackerInfo
      });
      console.log(product)
      this.$store.commit('setProductOrderInfo', product)
      const fn = this.replace ? 'replace' : 'push'
      this.$router[fn]('/addOrder')
    }
  }
}
</script>

<style lang='scss' scoped>
.product-list {
  padding: 0 40px;
  &.recommend {
    padding: 0;
    padding-top: 48px;
  }
  .recommend-title {
    text-align: left;
    font-size: 32px;
    color: #EC5958;
    margin-bottom: 24px;
    font-weight: bold;
  }
}
</style>